import React,{useEffect} from 'react'
import {useDispatch,useSelector} from "react-redux"
import {ALLLIST,APILIST,MYSTATE} from "../../../types/home.d"
import "../../../api/home"
import { ProductCard, Tag, Button} from 'react-vant';
import "../../../api/home"
import request from '../../../utils/request';

function Shop() {

  const dispatch=useDispatch()
  useEffect(()=>{
   
 request.get("/list").then(res=>{
       dispatch({
         type:ALLLIST,
         payload:res.data.list
       })     
 })
},[])


  const datalist=useSelector((state:MYSTATE)=>{
    return state.datalist
})
console.log(datalist);


  return (
    <div className='shop'>
        {
          datalist&&datalist.map((item:APILIST,index:number)=>{
            if(item.car==true){
              return <ProductCard
              key={index}
              num={item.num}
              price={item.price}
              desc={item.title}
              title={item.name}
              thumb={item.img}
              tags={
                <>
                  <Tag plain type="danger" style={{ marginRight: 5 }}>
                    {item.id}
                  </Tag>
                  
                </>
              }
              footer={
                <>
                <Button size="mini" round plain>
            -
          </Button>
                <Button>{item.num}</Button>
                  <Button size="mini" round plain style={{ marginRight: 2 }}>
                      +
                  </Button>
                </>
              }
            />
            }
          })
        }
    </div>
  )
}

export default Shop
